<template>
  <el-dialog 
    title='管理'
    :class='[{"big":dialogShowIf},"node-manage-edit-dialog"]'
    :visible.sync="visible"
    @close='handleClose'
    @open='handleOpen'
    top='10vh'
    size='tiny'
    >
    <div class="form-wrap">
      <el-form ref='detailManageForm' :model='form' :rules="rules" label-position='left' label-width="110px">

        <el-form-item label='执行单位类型' prop='assigneeType'>

          <el-select v-model='form.assigneeType'>

            <el-option 
              v-for="item in assigneeTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value" />

          </el-select>

          <!-- <p v-if='name && emplid' class="people">已选择 {{name}}({{this.emplid}}) <span @click.stop='dialogShowIf= true'>修改</span></p> -->

          <!-- <el-input class="people">已选择 {{name}}({{this.emplid}}) <span @click.stop='dialogShowIf= true'>修改</span></el-input> -->

         
          <!-- 已选择 {{name}}({{this.emplid}}) <span @click.stop='dialogShowIf= true'>修改</span></el-input> -->




        </el-form-item>


        <el-form-item :label='form.assigneeType!==3?"执行单位":"执行人"' prop='assignee'>

          
          <el-input 
            v-if='form.assigneeType==3'
            icon="edit"
            @focus.stop='dialogShowIf = true'
            :on-icon-click='()=>{ this.dialogShowIf = true}'
            readonly
            style='width:217px'
            :value='nameAndEmplid'/>




          <el-select clearable @change='handleAssignee2'  v-model='form.assignee' v-else-if='form.assigneeType==2'>

            <el-option 
              v-for="item in bList"
              :key="item.id"
              :label="item.name"
              :value="item.id" />

          </el-select>

          <el-select 
            @change='handleAssignee1' 
            v-model='form.assignee' 
            v-else
            clearable
          >

            <el-option 
              v-for="item in aList"
              :key="item.id"
              :label="item.name"
              :value="item.id" />

          </el-select>


          <search-div @getNameAndID='(data)=>{this.emplid = data.emplid;this.name = data.name}' :dialogShowIf.sync='dialogShowIf'/> 
          

        </el-form-item>

        <!-- <el-form-item label='刚柔类型' prop='rigidType'>

          <el-select clearable v-model='form.rigidType'>

            <el-option 
              v-for="item in rigidTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value" />

          </el-select>


        </el-form-item> -->


        <!-- <el-form-item label='柔性节点类型' prop='flexibleType' v-if='form.rigidType ===2'>

          <el-radio v-model='form.flexibleType' :label='1'>待选</el-radio>
          <el-radio v-model='form.flexibleType' :label='2'>可选</el-radio>


        </el-form-item> -->

        
        <!-- <el-form-item label='流程节点描述' prop='processNodeDesc'>

          <el-input type='textarea' v-model ='form.processNodeDesc' />

        </el-form-item> -->

      </el-form>
      
    </div>

    <span slot="footer">
      <el-button type='primary' @click.stop="handleSure('detailManageForm')">保 存</el-button>
    </span>

  </el-dialog>
</template>

<script>
import Vue from 'vue'
import SearchDiv from './searchDiv'
import { Message, Checkbox, Radio } from 'element-ui'
Vue.use(Radio)
Vue.use(Checkbox)
import Bus from './bus'
export default {
  components: {
    SearchDiv
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editProp: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {


    // const rule_rouType = (rule, value, callback) => {

    //   if (this.form.rigidType ===2 && !value) {
    //     return callback(new Error('请选择柔性节点类型'))
    //   }
    //   callback()
    // }

    const rule_rigidType = (rule, value, callback) => {

      if (!value) {
        return callback(new Error('请选择刚柔类型'))
      }
      callback()
    }

    const rule_assignee = (rule, value, callback) => {

      if (!value && this.form.assigneeType != 3) {
        return callback(new Error('请选择执行单位'))
      }

      if (!this.nameAndEmplid && this.form.assigneeType == 3) {
        return callback(new Error('请选择执行人'))
      }
      callback()
    }

    const rule_assigneeType = (rule, value, callback) => {

      if (!value) {
        return callback(new Error('请选择执行单位类型'))
      }

      if (value === 3 && !this.name && !this.emplid) {
        return callback(new Error('请选择单一执行人'))
      }


      callback()
    }

    return {
      visible: false,
      dialogShowIf: false,
      form: {
        // rigidType: '',
        assignee: '',
        assigneeName: '',
        assigneeType: '',
        // processNodeDesc: '',
        // flexibleType: null,
        processMouldId: '',
        fromKey: ''
      },
      emplid: '',
      name: '',
      rules: {
        // rigidType: [
        //   {
        //     required: true, validator: rule_rigidType, trigger: 'submit'
        //   }
        // ],
        assigneeType: [
          {
            required: true, validator: rule_assigneeType, trigger: 'submit'
          }
        ],
        assignee: [
          {
            required: true, validator: rule_assignee, trigger: 'submit'
          }
        ]
      },
      // rigidTypeList:
      //   [
      //     {
      //       value: 1,
      //       label: '刚性节点'
      //     }, {
      //       value: 2,
      //       label: '柔性节点'
      //     }
      //     , {
      //       value: 3,
      //       label: '节点刚性人员柔性'
      //     }
      //   ],

      assigneeList: [
        // { value: 1, label: '备案人角色' },
        // { value: 2, label: '流程角色' },
        // { value: 3, label: '其他人角色' }
      ],

      assigneeTypeList: [
        {
          value: 1,
          label: '通用角色'
        }, {
          value: 2,
          label: '指定流程角色'
        }, {
          value: 3,
          label: '单一执行人'
        }
      ],
      aList: [],
      bList: []
    }
  },


  watch: {
    dialogVisible (newValue) {
      this.visible = newValue
    },
    'form.assigneeType' (newValue) {
      if (newValue == 3) {
        this.dialogShowIf = true
      } else {

        this.dialogShowIf = false
        this.form.assignee = ''
        this.form.assigneeName = ''
        this.emplid = ''
        this.name = ''

      }

      // if (newValue == 1) {
      //   this.assigneeList = this.aList
      // }

      // if (newValue == 2) {
      //   this.assigneeList = this.bList
      // }
    }

  },
  computed: {
    nameAndEmplid () {
      return this.name && this.emplid ? `${this.name}(${this.emplid})` : ''
    }
  },

  mounted () {
    this.getLeixingSelect()
  },
  methods: {

    handleAssignee1 (val) {

      let str = ''
      this.aList.forEach(ele => {
        if (ele.id === val) str = ele.name
      })
      this.form.assigneeName = str ? str : ''

      !str && (this.form.assignee = '')

    },

    handleAssignee2 (val) {
      let str = ''

      this.bList.forEach(ele => {
        if (ele.id === val) str = ele.name
      })

      this.form.assigneeName = str ? str : ''

      !str && (this.form.assignee = '')
    },

    handleOpen () {
      this.dialogShowIf = false
      // this.form.processNodeDesc = this.editProp.processNodeDesc
      // this.form.rigidType = this.editProp.rigidType
      // this.form.flexibleType = this.editProp.flexibleType || null
      if (!this.editProp.assigneeType) {
        this.form.assigneeType = ''
      } else {
        this.form.assigneeType = parseInt(this.editProp.assigneeType)
      }



      setTimeout(() => {

        this.form.assigneeName = this.editProp.assigneeName
        this.form.assignee = this.editProp.assignee

        if (this.form.assigneeType === 3) {
          this.name = this.form.assigneeName
          this.emplid = this.form.assignee
        }

      }, 12);

      const getAssignee = (type) => {

        if (type === 'a') {
          this.aList.forEach(ele => {
            if (ele.id === val) this.form.assigneeName = ele.name
          })
        }

        if (type === 'b') {
          this.bList.forEach(ele => {
            if (ele.id === val) this.form.assigneeName = ele.name
          })
        }

      }


      this.form.processMouldId = this.editProp.processMouldId
      this.form.fromKey = this.editProp.fromKey


    },

    getLeixingSelect () {


      // 通用角色对应的指定执行单位接口： 
      const a = () => {
        this.Axios.Post('/wfConfAssigneeCommonRole/getAllCommonRole')
          .then((res) => {
            this.aList = res.data.datas
          })
      }
      // 指定流程角色对应的执行单位接口： 
      const b = () => {
        this.Axios.Post('/wfConfAssigneeHolder/getAllAssigneeHolder')
          .then((res) => {
            this.bList = res.data.datas
          })
      }

      a()
      b()
    },
    handleClose () {
      this.$emit("update:dialogVisible", false)
    },

    handleSure (formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {

          const params = {
            ...this.form
          }

          if (this.form.assigneeType === 3) {
            params.assignee = this.emplid
            params.assigneeName = this.name
          }

          this.Axios
            .Post('/WfConfProcessMould/updateProcessNode', params)
            .then(res => {

              if (res.data.status == 1) {

                Message({
                  type: 'success',
                  message: res.data.message
                })

                Bus.$emit('refresh', Math.random())

              }

              this.handleClose()
            })

        } else {

          return false
        }
      })
    },

  },
}
</script>

<style lang='less' scoped>
.form-wrap {
  padding: 20px 0 0 80px;
  .people {
    & > span {
      color: #38f;
      cursor: pointer;
      margin-left: 25px;
    }
  }
}
</style>

<style lang='less'>
.node-manage-edit-dialog .el-dialog.el-dialog--tiny {
  width: 40%;
}

.node-manage-edit-dialog.big .el-dialog.el-dialog--tiny {
  width: 60%;
}
</style>
